Ext.Loader.setConfig( {
	enabled : true
});

Ext.require( [ '*' ]);

Ext.onReady(function() {
	function showDetail(record) {
		var labelWidth = 75;
		var detailHeaderPanel = Ext.create('Ext.form.Panel', {
			// region : 'north',
			height : 300,
			border : false,
			frame : true,
			defaults : {
				margin : '5 5 5 5'
			// ,disabled : true
			},
			items : [ {
				xtype : 'fieldcontainer',
				combineErrors : true,
				msgTarget : 'side',
				layout : 'hbox',
				items : [ {
					xtype : 'displayfield',
					width : labelWidth,
					value : '注文番号：'
				}, {
					name : 'categoryName',
					xtype : 'textfield',
					width : 150,
					readOnly : true
				// ,value:record.get('categoryName')
						}, {
							xtype : 'displayfield',
							width : labelWidth,
							value : '注文Mall:',
							margin : '0 0 0 15'
						}, {
							name : 'janCode',
							xtype : 'textfield',
							width : 150,
							readOnly : true
						// ,value:record.get('janCode')
						} ]
			}, {
				xtype : 'fieldcontainer',
				combineErrors : true,
				msgTarget : 'side',
				layout : 'hbox',
				items : [ {
					xtype : 'displayfield',
					width : labelWidth,
					value : '注文日：'
				}, {
					name : 'categoryName',
					xtype : 'datefield',
					width : 150
				// ,readOnly:true
						// ,value:record.get('categoryName')
						}, {
							xtype : 'displayfield',
							width : labelWidth,
							value : '顧客名:',
							margin : '0 0 0 15'
						}, {
							name : 'janCode',
							xtype : 'textfield',
							width : 150,
							readOnly : true
						// ,value:record.get('janCode')
						} ]
			}, {
				xtype : 'fieldcontainer',
				combineErrors : true,
				msgTarget : 'side',
				layout : 'hbox',
				items : [ {
					xtype : 'displayfield',
					width : labelWidth,
					value : '顧客電話：'
				}, {
					name : 'categoryName',
					xtype : 'datefield',
					width : 150,
					readOnly : true
				// ,value:record.get('categoryName')
						}, {
							xtype : 'displayfield',
							width : labelWidth,
							value : '注文状況:',
							margin : '0 0 0 15'
						}, {
							name : 'janCode',
							xtype : 'textfield',
							width : 150,
							readOnly : true
						// ,value:record.get('janCode')
						} ]
			}, {
				xtype : 'fieldcontainer',
				combineErrors : true,
				msgTarget : 'side',
				layout : 'hbox',
				items : [ {
					xtype : 'displayfield',
					width : labelWidth,
					value : '顧客住所：'
				}, {
					name : 'itemCount',
					xtype : 'textfield',
					width : 405,
					readOnly : true
				// ,value:record.get('itemCount')
						} ]
			}, {
				xtype : 'fieldcontainer',
				combineErrors : true,
				msgTarget : 'side',
				layout : 'hbox',
				items : [ {
					xtype : 'displayfield',
					width : labelWidth,
					value : '注文メール本文：'
				}, {
					name : 'itemCount',
					xtype : 'textareafield',
					width : 405,
					height : 150
				// ,readOnly:true
						// ,value:record.get('itemCount')
						} ]
			} ]
		});

		Ext.define('janCodeDetail', {
			extend : 'Ext.data.Model',
			fields : [ 'itemCode', 'itemStatus', 'nyukaDate', 'syukaDate' ],
			idProperty : 'itemCode'
		});

		// create the Data Store
		var janCodeDetailStore = Ext.create('Ext.data.Store', {
			autoLoad : true,
			pageSize : 50,
			model : 'janCodeDetail',
			remoteSort : true,
			proxy : {
				type : 'ajax',
				url : 'getJanCodeDetail/',
				reader : {
					root : 'results',
					totalProperty : 'totalCount'
				},
				extraParams : {
					'janCode' : '1'
				}
			}
		});

		var detailGridPanel = Ext.create('Ext.grid.Panel', {
			// region : 'center',
			store : janCodeDetailStore,
			columnLines : true,
			height : 200,
			columns : [ {
				header : 'JANCD',
				dataIndex : 'itemCode',
				width : 100
			}, {
				header : '商品名',
				dataIndex : 'itemStatus',
				flex : 1
			}, {
				header : '注文数量',
				dataIndex : 'nyukaDate',
				width : 100
			} ],
			// region: 'center',
			// title: 'JANCODE管理',
			frame : true,
			// paging bar on the bottom
			bbar : Ext.create('Ext.PagingToolbar', {
				store : store,
				displayInfo : true,
				displayMsg : 'Displaying topics {0} - {1} of {2}',
				emptyMsg : "No topics to display"
			// items:[
					// '-', {
					// text: 'Show Preview',
					// pressed: pluginExpanded,
					// enableToggle: true,
					// toggleHandler: function(btn,
					// pressed) {
					// var preview =
					// Ext.getCmp('gv').getPlugin('preview');
					// preview.toggleExpanded(pressed);
					// }
					// }]
					})
		});

		var shippingDetailGridPanel = Ext.create('Ext.grid.Panel', {
			// region : 'center',
			store : janCodeDetailStore,
			columnLines : true,
			title : '出庫明細',
			style : 'margin: 10px 0 0 0;',
			height : 200,
			columns : [ {
				header : 'JANCD',
				dataIndex : 'itemCode',
				width : 100
			}, {
				header : '商品名',
				dataIndex : 'itemStatus',
				flex : 1
			}, {
				header : '製品番号',
				dataIndex : 'nyukaDate',
				width : 100
			} ],
			// region: 'center',
			// title: 'JANCODE管理',
			frame : true,
			// paging bar on the bottom
			bbar : Ext.create('Ext.PagingToolbar', {
				store : store,
				displayInfo : true,
				displayMsg : 'Displaying topics {0} - {1} of {2}',
				emptyMsg : "No topics to display"
			// items:[
					// '-', {
					// text: 'Show Preview',
					// pressed: pluginExpanded,
					// enableToggle: true,
					// toggleHandler: function(btn,
					// pressed) {
					// var preview =
					// Ext.getCmp('gv').getPlugin('preview');
					// preview.toggleExpanded(pressed);
					// }
					// }]
					})
		});
		var detailWin = Ext.create('widget.window', {
			title : '出庫明細',
			closable : true,
			closeAction : 'hide',
			width : 540,
			// height : 600,
			layout : 'auto',
			bodyStyle : 'padding: 5px;',
			items : [ detailHeaderPanel, detailGridPanel,
					shippingDetailGridPanel ],
			buttons : [ {
				text : '出庫する'
			},

			{
				text : 'Reset',
				handler : function() {
				}
			} ]
		});

		detailWin.show();
	}

	function showShipping() {

		var labelWidth = 75;
		var detailHeaderPanel = Ext.create('Ext.form.Panel', {
			// region : 'north',
			height : 50,
			border : false,
			frame : true,
			defaults : {
				margin : '5 5 5 5'
			// ,disabled : true
			},
			items : [ {
				xtype : 'fieldcontainer',
				combineErrors : true,
				msgTarget : 'side',
				layout : 'hbox',
				items : [ {
					xtype : 'displayfield',
					width : labelWidth,
					value : '製造番号：'
				}, {
					name : 'categoryName',
					xtype : 'textfield',
					width : 150,
					readOnly : true
				// ,value:record.get('categoryName')
						}, {
							xtype : 'displayfield',
							width : labelWidth,
							value : '注文番号:',
							margin : '0 0 0 15'
						}, {
							name : 'janCode',
							xtype : 'textfield',
							width : 150,
							readOnly : true
						// ,value:record.get('janCode')
						} ]
			} ]
		});

		Ext.define('janCodeDetail', {
			extend : 'Ext.data.Model',
			fields : [ 'itemCode', 'itemStatus', 'nyukaDate', 'syukaDate' ],
			idProperty : 'itemCode'
		});

		// create the Data Store
		var janCodeDetailStore = Ext.create('Ext.data.Store', {
			autoLoad : true,
			pageSize : 50,
			model : 'janCodeDetail',
			remoteSort : true,
			proxy : {
				type : 'ajax',
				url : 'getJanCodeDetail/',
				reader : {
					root : 'results',
					totalProperty : 'totalCount'
				},
				extraParams : {
					'janCode' : '1'
				}
			}
		});

		var shippingDetailGridPanel = Ext.create('Ext.grid.Panel', {
			// region : 'center',
			store : janCodeDetailStore,
			columnLines : true,
			height : 200,
			columns : [ {
				header : 'JANCD',
				dataIndex : 'itemCode',
				width : 100
			}, {
				header : '商品名',
				dataIndex : 'itemStatus',
				flex : 1
			}, {
				header : '製造番号',
				dataIndex : 'nyukaDate',
				width : 100
			} ],
			// region: 'center',
			// title: 'JANCODE管理',
			frame : true
		// paging bar on the bottom
				// ,bbar : Ext.create('Ext.PagingToolbar', {
				// store : store,
				// displayInfo : true,
				// displayMsg : 'Displaying topics {0} - {1} of {2}',
				// emptyMsg : "No topics to display"
				// // items:[
				// // '-', {
				// // text: 'Show Preview',
				// // pressed: pluginExpanded,
				// // enableToggle: true,
				// // toggleHandler: function(btn,
				// // pressed) {
				// // var preview =
				// // Ext.getCmp('gv').getPlugin('preview');
				// // preview.toggleExpanded(pressed);
				// // }
				// // }]
				// })
				});

		var detailWin = Ext.create('widget.window', {
			title : '出庫',
			closable : true,
			closeAction : 'hide',
			width : 600,
			// height : 600,
			layout : 'auto',
			bodyStyle : 'padding: 5px;',
			items : [ detailHeaderPanel, shippingDetailGridPanel ],
			buttons : [ {
				text : '出庫する'
			} ]
		});

		detailWin.show();

	}

	Ext.define('item', {
		extend : 'Ext.data.Model',
		fields : [ 'categoryName', 'janCode', 'itemCode', 'itemName',
				'itemStatus' ],
		idProperty : 'itemCode'
	});

	// create the Data Store
	var store = Ext.create('Ext.data.Store', {
		autoLoad : true,
		pageSize : 50,
		model : 'item',
		remoteSort : true,
		proxy : {
			type : 'ajax',
			url : 'getAllItemList/',
			reader : {
				root : 'results',
				totalProperty : 'totalCount'
			}
		}
	});

	// create the grid and specify what field you want
	// to use for the editor at each column.
	var grid = Ext.create('Ext.grid.Panel', {
		store : store,
		columnLines : true,
		height : 500,
		columns : [ {
			header : '出庫番号',
			dataIndex : 'categoryName',
			width : 150
		}, {
			header : '出荷日',
			dataIndex : 'janCode',
			width : 130
		}, {
			header : '注文番号',
			dataIndex : 'itemName',
			flex : 1
		}, {
			header : '注文日',
			dataIndex : 'itemCode',
			width : 130
		}, {
			header : '配送番号',
			dataIndex : 'nyukoTime',
			width : 90
		}
		// , {
		// header : '入荷日時',
		// dataIndex : 'itemCount',
		// width : 100
		// }, {
		// header : '注文番号',
		// dataIndex : 'itemCount',
		// width : 90
		// }, {
		// header : '出荷日時',
		// dataIndex : 'itemCount',
		// width : 100
		// }, {
		// header : '出荷番号',
		// dataIndex : 'itemCount',
		// width : 90
		// }
		],
		// region: 'center',
		// title: 'JANCODE管理',
		frame : true,
		tbar : [ {
			itemId : 'itemDetail',
			text : '出庫明細見る',
			iconCls : 'add',
			handler : function() {
				showDetail();
			}
		// ,disabled : true
				}, {
					itemId : '',
					text : '個別出庫',
					iconCls : 'add',
					handler : function() {
						showShipping();
					}
				// ,disabled : true
				} ],
		bbar : Ext.create('Ext.PagingToolbar', {
			store : store,
			displayInfo : true,
			displayMsg : 'Displaying topics {0} - {1} of {2}',
			emptyMsg : "No topics to display"
		// items:[
				// '-', {
				// text: 'Show Preview',
				// pressed: pluginExpanded,
				// enableToggle: true,
				// toggleHandler: function(btn, pressed) {
				// var preview = Ext.getCmp('gv').getPlugin('preview');
				// preview.toggleExpanded(pressed);
				// }
				// }]
				}),
		listeners : {
			'selectionchange' : function(view, records) {
				grid.down('#itemDetail').setDisabled(!records.length);
			}
		// ,'itemdblclick' : function(view, record, item, index) {
		// // alert(record.get('itemName'));
		// showDetail(record);
		// }
		}
	});

	var searchPanel = Ext.create('Ext.form.Panel', {
		// region: 'north',
		height : 80,
		border : false,
		frame : true,
		defaults : {
			margin : '15 5 5 5'
		},
		items : [ {
			xtype : 'fieldcontainer',
			combineErrors : true,
			msgTarget : 'side',
			layout : 'hbox',
			items : [ {
				xtype : 'displayfield',
				value : '注文番号：'
			}, {
				name : 'hours',
				xtype : 'combo',
				width : 150
			}, {
				xtype : 'displayfield',
				value : '出庫日:',
				margin : '0 0 0 15'
			},

			{
				name : 'minutes',
				xtype : 'datefield',
				width : 150
			}, {
				xtype : 'displayfield',
				value : '製品番号:',
				margin : '0 0 0 15'
			},

			{
				name : 'minutes',
				xtype : 'textfield',
				width : 150
			}, {
				xtype : 'displayfield',
				value : '商品名:',
				margin : '0 0 0 15'
			},

			{
				name : 'minutes',
				xtype : 'textfield',
				width : 150
			} ]
		} ],
		buttons : [
				{
					text : '検索',
					handler : function() {
						var form = this.up('form').getForm(), s = '';
						if (form.isValid()) {
							Ext.iterate(form.getValues(), function(key, value) {
								s += Ext.util.Format.format("{0} = {1}<br />",
										key, value);
							}, this);

							Ext.Msg.alert('Form Values', s);
						}
					}
				},

				{
					text : 'Reset',
					handler : function() {
						this.up('form').getForm().reset();
					}
				} ]
	});

	Ext.create('Ext.panel.Panel', {
		title : '倉庫管理＞出庫管理',
		layout : 'auto',
		items : [ searchPanel, grid ],
		// height : 500,
		renderTo : 'bodyarea'
	});

});
